<template>
  <view class="flex_left_right container tab_bar_container">
    <view class="flex_right wrapper" v-for="(item, index) in tabBarList" :key="index" @click="changeTabBarFun(index)">
      <view class="tab_bar_row">
        <image :src="currentImage(index)" />
        <view>{{ item.text }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted, PropType } from 'vue'
  import { useNavigatePage } from '@/hooks/navigateTo'
  import useUserInfoStore from '@/store/userInfo'
  const pages = getCurrentPages()
  const props = defineProps({
    index: {
      type: Number as PropType<number>, // 明确类型为 string
      required: true,
      default: () => 0,
    },
  })
  const userInfoStore = useUserInfoStore()
  const currentIndex = ref(0)
  const navigatePage = useNavigatePage()
  const currentImage = computed(() => (index: number) => currentIndex.value == index ? tabBarList.value[index].selectedIconPath : tabBarList.value[index].iconPath)
  const tabBarList = ref([
    {
      text: '首页',
      iconPath: '/static/tabBar/home.png',
      selectedIconPath: '/static/tabBar/home_active.png',
      pagePath: userInfoStore.getPlatformType == 'gld' ? '/pages/zmanager/index/index' : '/pages/invest/index/index',
    },
    {
      text: '我的',
      iconPath: '/static/tabBar/my.png',
      selectedIconPath: '/static/tabBar/my_active.png',
      pagePath: '/pages/zmanager/userCenter/index',
    },
  ])
  const changeTabBarFun = (index: number) => {
    const currentPage = pages[pages.length - 1]
    const currentPath = currentPage.route
    if ('/' + currentPath !== tabBarList.value[index].pagePath) {
      currentIndex.value = index
      navigatePage.redirectTo(tabBarList.value[index].pagePath)
    }
  }
  onMounted(() => (currentIndex.value = props.index))
</script>
<style scoped lang="scss">
  .tab_bar_container {
    border-top-width: 0.5px !important;
    border-color: #dadbde !important;
    border-top-style: solid;
    background-color: #fff;
    .tab_bar_row {
      text-align: center;
      padding: 10rpx 0;
      image {
        width: 38rpx;
        height: 38rpx;
        object-fit: cover;
      }
    }
  }
</style>
